﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@inherits FluentComponentBase
@if (Data is null)
{
    <FluentPageScript Src="./_content/Microsoft.FluentUI.AspNetCore.Components/Components/NavMenu/FluentNavMenu.razor.js"></FluentPageScript>
}
<div id="@Id" @ref="@Element" @attributes="AdditionalAttributes" class="@ClassValue" style="@StyleValue" aria-label="@(Collapsible ? null : @Title)" role="menu" aria-expanded="@Expanded">
    <CascadingValue Value="this" IsFixed="true">
        @if (Collapsible)
        {
            <FluentKeyCode Anchor="@($"{@Id}-expander")" OnKeyDown="@HandleExpandCollapseKeyDownAsync" />
            <div id="@($"{@Id}-expander")"
                 aria-label="@Title"
                 aria-expanded="@(Expanded.ToAttributeValue())"
                 role="menuitem"
                 class="fluent-nav-item expander"
                 tabindex="0"
                 @onclick="@ToggleExpandedAsync">
                <div class="positioning-region">
                    <div class="content-region">
                        @if (ExpanderContent is not null)
                        {

                            @ExpanderContent

                        }
                        else
                        {
                            <FluentIcon Value="@(new CoreIcons.Regular.Size24.Navigation())" Width="20px" />
                        }
                    </div>
                </div>
            </div>
        }
        @ChildContent
    </CascadingValue>
</div>
